<script setup lang="ts">
import { inject, ref } from 'vue'
import { messageKey, countKey, updateCountKey, userKey } from '@/config/injectKey'
const message = inject(messageKey)
const count = inject(countKey, ref(0))
const updateCount = inject(updateCountKey)!
const user = inject(userKey)
// if (user) {
//   user.value.name = '123' // 修改会报错，因为是只读数据
// }
</script>

<template>
  <div class="inject">
    <h3>子组件</h3>
    <p>消息：{{ message }}</p>
    <p>计数：{{ count }}</p>
    <button @click="updateCount(count + 1)">计数加1</button>
    <br />
    <template v-if="user">
      <p>用户名: {{ user.name }}</p>
      <p>邮箱: {{ user.email }}</p>
    </template>
  </div>
</template>

<style scoped lang="scss"></style>
